import React, { useCallback } from 'react';
import './LoginHeader.scss';
import { RightOutline } from 'antd-mobile-icons';
import { LoginType } from '@/views/Login/Login';

interface LoginHeaderProps {
  loginType: LoginType;
  changeLoginType: (loginType: LoginType) => void;
}

const LoginHeader: React.FunctionComponent<LoginHeaderProps> = ({ loginType, changeLoginType }) => {
  // 左侧文本内容
  const renderLeftTitle = useCallback((): string => loginType === 'passwordLogin' ? '密码登录' : '短信验证码登录', [loginType]);
  // 右侧文本内容
  const renderRightTitle = useCallback((): string => loginType === 'passwordLogin' ? '短信验证码登录' : '密码登录', [loginType]);

  /**
   * @description 通知父组件修改登录方式的回调函数
   * */
  const changeLogin = useCallback(() => {
    changeLoginType(loginType === 'passwordLogin' ? 'codeLogin' : 'passwordLogin');
  }, [loginType]);

  return (
    <div className="login-header">
      <div className="left">
        <h3>{renderLeftTitle()}</h3>
      </div>
      <div className="right" onClick={changeLogin}>
        <span>{renderRightTitle()}</span>
        <RightOutline />
      </div>
    </div>
  );
};

export default LoginHeader;